<template>
  <div id="order" class="container">
    <el-tabs v-model="activeName" class="tabs tab-card" type="card" @tab-click="handleClick">
      <el-tab-pane :label="$t('关键词监控')" name="2">
        <div class="searchBtn">
          <el-radio-group v-model="engine" size="medium" @change="changeEngine">
            <el-radio-button label="baidu_pc">
              {{ $t('百度PC') }}
            </el-radio-button>
            <el-radio-button label="baidu_mob">
              {{ $t('百度移动') }}
            </el-radio-button>
            <el-radio-button label="three_pc">360PC</el-radio-button>
            <el-radio-button label="sougou_mob">
              {{ $t('搜狗移动') }}
            </el-radio-button>
          </el-radio-group>
        </div>
        <ul class="card-box">
          <li class="card-item">
            <div class="desc">
              <div class="text">
                <h6>{{ $t('排名第一页') }}</h6>
                <h4>{{ queryData.first ? queryData.first : 0 }}</h4>
              </div>
              <div class="icon el-icon-s-order"></div>
            </div>
            <p>{{ $t('统计日期') }}：{{ queryData.time }}</p>
          </li>
          <li class="card-item">
            <div class="desc">
              <div class="text">
                <h6>{{ $t('排名前十页') }}</h6>
                <h4>{{ queryData.ten ? queryData.ten : 0 }}</h4>
              </div>
              <div class="icon el-icon-s-order"></div>
            </div>
            <p>{{ $t('统计日期') }}：{{ queryData.time }}</p>
          </li>
          <li class="card-item">
            <div class="desc">
              <div class="text">
                <h6>{{ $t('达标关键词个数') }}</h6>
                <h4>{{ queryData.done ? queryData.done : 0 }}</h4>
              </div>
              <div class="icon el-icon-s-order"></div>
            </div>
            <p>{{ $t('统计日期') }}：{{ queryData.time }}</p>
          </li>
          <li class="card-item">
            <div class="desc">
              <div class="text">
                <h6>{{ $t('关键词总数') }}</h6>
                <h4>{{ queryData.all ? queryData.all : 0 }}</h4>
              </div>
              <div class="icon el-icon-s-order"></div>
            </div>
            <p>{{ $t('统计日期') }}：{{ queryData.time }}</p>
          </li>
        </ul>
        <div class="topbar">
          <div class="bar-left">
            <span>{{ $t('关键词过滤') }}：</span>
            <el-radio-group v-model="rank" size="small" @change="changeRank">
              <el-radio-button label="1">{{ $t('第一名') }}</el-radio-button>
              <el-radio-button label="3">{{ $t('前三名') }}</el-radio-button>
              <el-radio-button label="10">{{ $t('第一页') }}</el-radio-button>
              <el-radio-button label="30">{{ $t('前三页') }}</el-radio-button>
              <el-radio-button label="50">{{ $t('前五页') }}</el-radio-button>
              <el-radio-button label="100">{{ $t('前十页') }}</el-radio-button>
            </el-radio-group>
            <span class="btn restBtn" @click="rest">{{ $t('重置') }}</span>
          </div>
          <div class="bar-right">
            <InputSearch @search="search" />
            <!-- <el-input v-model="keywords" placeholder="请输入关键词">
              <el-button
                slot="append"
                @click="search"
                icon="el-icon-search"
              ></el-button>
            </el-input> -->
          </div>
        </div>
        <div class="content">
          <el-table stripe :data="resultData">
            <el-table-column :label="$t('关键词名称')" prop="keyword" />
            <el-table-column :label="$t('最高排名')" prop="top_rank" />
            <!-- <el-table-column :label="$t('采集区域')" prop="area" /> -->
            <!-- <el-table-column :label="$t('采集IP')" prop="ip" /> -->
            <!-- <el-table-column :label="$t('采集网络')" prop="network" /> -->
            <el-table-column :label="$t('关键词收录量')" prop="collect_count" />
            <el-table-column :label="$t('页面标题')" prop="page_title" />
            <el-table-column :label="$t('页面链接地址')" prop="page_url" />
            <!-- <el-table-column :label="$t('搜索引擎')" prop="search_engine" /> -->
            <!-- <el-table-column :label="$t('网站权重')" prop="site_weight" /> -->
            <!-- <el-table-column label="top100" prop="top100" /> -->
            <el-table-column :label="$t('查询时间')" prop="create_time">
              <template slot-scope="scope">
                {{ getDate(scope.row.create_time) }}
              </template>
            </el-table-column>
            <el-table-column :label="$t('操作')" width="200px" fixed="right">
              <template slot-scope="scope">
                <el-button type="primary" class="orange" size="mini" @click="checkInfo(scope.row)">
                  {{ $t('详情') }}
                </el-button>
                <el-button type="primary" size="mini" @click="checkNew(scope.row)"
                  v-loading.fullscreen.lock="fullscreenLoading">
                  {{ $t('数据更新') }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination :current-page="queryPage.currentPage" :page-sizes="queryPage.pageSizes"
            :page-size="queryPage.size" layout="total, sizes, prev, pager, next, jumper" :total="queryPage.total"
            :hide-on-single-page="queryPage.total < queryPage.size ? true : false
              " @size-change="handleSizeChange2" @current-change="handleCurrentChange2" />
        </div>
        <BaseDialog :title="$t('详情')" :dialog-show.sync="dialogInfo" width="60%" class="link">
          <el-table :data="resultInfo" border stripe :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }">
            <el-table-column :label="$t('页面标题')" prop="page_title" show-overflow-tooltip />
            <el-table-column :label="$t('页面链接地址')" prop="page_url" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-link :href="scope.row.page_url" target="_blank">
                  {{ scope.row.page_url }}
                </el-link>
              </template>
            </el-table-column>
            <el-table-column :label="$t('排名')" prop="top_rank" />
            <el-table-column :label="$t('查询时间')" prop="create_time">
              <template slot-scope="scope">
                {{ getDate(scope.row.create_time) }}
              </template>
            </el-table-column>
          </el-table>
          <el-pagination :current-page="detailPage.currentPage" :page-sizes="detailPage.pageSizes"
            :page-size="detailPage.size" layout="total, sizes, prev, pager, next, jumper" :total="detailPage.total"
            :hide-on-single-page="detailPage.total < detailPage.size ? true : false
              " @size-change="handleSizeChange1" @current-change="handleCurrentChange1" />
        </BaseDialog>
        <div class="note">
          <p>{{ $t('注意事项') }}</p>
          <ul>
            <li>
              {{ $t('注意事项1') }}
            </li>
            <!-- <li>关键词排名列表上，0标识排名没有进入到前100位。</li> -->
          </ul>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="$t('关键词管理')" name="1">
        <el-button type="primary" size="small" icon="el-icon-plus" style="margin: 0 15px 15px" @click="goAdd">
          {{ $t('添加站点关键词') }}
        </el-button>
        <a :href="downurl" download="">
          <el-button size="small" type="primary" class="orange el-icon-download">
            {{ $t('下载关键词模板') }}
          </el-button>
        </a>
        <el-upload :headers="myHeaders" :data="uploadData" class="avatar-uploader"
          :action="$store.getters.updateURL + 'keyword/import'" :show-file-list="true" :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload" :on-change="handleChangePic">
          <el-button type="primary" size="small" icon="el-icon-upload2">
            {{ $t('导入关键词') }}
          </el-button>
        </el-upload>
        <BaseDialog :title="addForm.id ? $t('编辑') : $t('添加')" :dialog-show.sync="dialogShow" width="50%" class="keyword">
          <el-form ref="addForm" :model="addForm" :rules="rules" class="addForm" label-position="top">
            <el-form-item :label="$t('选择站点')" prop="website_id">
              <el-select v-model="addForm.website_id" :placeholder="$t('请选择站点')" disabled>
                <el-option v-for="item in options" :key="item.id" :label="item.domain" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('关键词')" prop="name">
              <el-input v-model="addForm.name" />
            </el-form-item>
            <el-form-item :label="$t('链接')" prop="url">
              <el-input v-model="addForm.url" />
            </el-form-item>
            <el-form-item :label="$t('分布位置')">
              <el-input v-model="addForm.position" />
            </el-form-item>
            <el-form-item ::label="$t('状态')">
              <el-select v-model="addForm.status">
                <el-option :label="$t('正常')" :value="1" />
                <el-option :label="$t('暂停')" :value="2" />
              </el-select>
            </el-form-item>
            <div class="btn">
              <el-button @click="dialogShow = false">
                {{ $t('取消') }}
              </el-button>
              <el-button type="primary" @click="submit()">
                {{ $t('提交') }}
              </el-button>
            </div>
          </el-form>
        </BaseDialog>
        <!-- <el-button type="danger" size="small" icon="el-icon-delete" @click="Batchdelete"> {{ $t('批量删除') }}</el-button> -->
        <el-table :data="keywordData" @selection-change="handleSelectionChange">
          <!-- <el-table-column type="selection" width="55" /> -->
          <el-table-column label="ID" prop="id" width="75" />
          <el-table-column :label="$t('关键词')" prop="name" show-overflow-tooltip />
          <el-table-column :label="$t('链接')" prop="url" show-overflow-tooltip />
          <el-table-column :label="$t('分布位置')" prop="position" />
          <el-table-column :label="$t('百度PC')" prop="baidu_pc" />
          <el-table-column :label="$t('百度MOB')" prop="baidu_mob" />
          <el-table-column label="360PC" prop="three_pc" />
          <el-table-column :label="$t('搜狗MOB')" prop="sougou_mob" />
          <el-table-column :label="$t('状态')" prop="status">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status == 1" type="danger" size="small">
                {{ $('正常') }}
              </el-tag>
              <el-tag v-else type="info" size="small">
                {{ $t('已暂停') }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column :label="$t('操作')" width="220px" fixed="right">
            <template slot-scope="scope">
              <el-button type="primary" class="orange" size="mini" @click="check(scope.row)">
                {{ $t('查看') }}
              </el-button>
              <el-button type="primary" size="mini" @click="goedit(scope.row)">
                {{ $t('编辑') }}
              </el-button>
              <el-button class="dele" size="mini" @click="del(scope.row)">
                {{ $t('删除') }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <BaseDialog :title="$t('关键词趋势图')" :dialog-show.sync="dialogShow2" width="50%" class="keyword">
          <div>
            <Echarts ref="echarts" :keyword-data="keywordsData" />
          </div>
        </BaseDialog>
        <el-pagination :current-page="page.currentPage" :page-sizes="page.pageSizes" :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper" :total="page.total"
          :hide-on-single-page="page.total < page.size ? true : false" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import keywordApi from '@/api/market/keywords.js'
import websiteApi from '@/api/website.js'
import Echarts from './echarts.vue'
export default {
  components: { Echarts },
  data() {
    return {
      fullscreenLoading: false,
      detailKeywordId: 0,
      keywords: '',
      engine: 'baidu_pc',
      rank: '',
      downurl: '',
      keywordData: [], // 关键词列表
      dialogShow: false,
      options: [], // 站点下拉选项
      addForm: {},
      dialogShow2: false,
      addForm2: {}, // 编辑
      keywordIds: [], // 关键词id数组
      rules: {
        website_id: [
          {
            required: 'true',
            message: this.$t('请选择站点'),
            trigger: 'change'
          }
        ],
        name: [
          {
            required: 'true',
            message: this.$t('请输入关键词名称'),
            trigger: 'blur'
          }
        ],
        url: [
          {
            required: 'true',
            message: this.$t('请输入关键词链接'),
            trigger: 'blur'
          }
        ]
      },
      rules2: {
        keyword_id: [
          {
            required: 'true',
            message: this.$t('请选择关键词'),
            trigger: 'change'
          }
        ],
        website_id: [
          {
            required: 'true',
            message: this.$t('请选择站点'),
            trigger: 'change'
          }
        ]
      },
      page: {
        total: 0,
        currentPage: 1,
        size: 10,
        pageSizes: [10, 20, 30, 40]
      }, // 分页器
      detailPage: {
        total: 0,
        currentPage: 1,
        size: 10,
        pageSizes: [10, 20, 30, 40]
      }, // 分页器
      queryPage: {
        total: 0,
        currentPage: 1,
        size: 10,
        pageSizes: [10, 20, 30, 40]
      }, // 分页器
      val: {},
      id: '',
      siteId: '',
      activeName: '2',
      myHeaders: { Authorization: `Bearer ${this.$store.getters.token}` },
      uploadData: {},
      resultData: [],
      dialogInfo: false,
      resultInfo: [],
      queryData: {},
      keywordsData: []
    }
  },
  computed: {
    siteId1() {
      return this.$store.getters.siteId
    }
  },
  watch: {
    siteId1(val, value) {
      this.siteId = val
      this.uploadData = {
        website_id: val
      }
      if (val) {
        this.getList()
      }
      this.getQuery()
    }
  },
  created() {
    this.getWebsiteList()
    this.siteId = this.$store.getters.siteId
    this.uploadData = {
      website_id: this.$store.getters.siteId
    }

    this.getDownload()
    if (this.siteId) {
      this.getList()
      this.getQuery()
    }
  },
  mounted() {
    // this.getTikets()
  },
  updated() { },
  methods: {
    getDate(date) {
      var t = new Date(date).toLocaleString()
      return t
    },
    // 查看详情
    checkInfo(row) {
      this.dialogInfo = true
      this.detailKeywordId = row.keyword_id
      this.getDetail()
    },
    getDetail() {
      const param = {
        page: this.detailPage.currentPage,
        limit: this.detailPage.size,
        keyword_id: this.detailKeywordId,
        engine: this.engine
      }
      keywordApi.keywordDeatil(param).then(res => {
        if (res.code == 0) {
          this.detailPage.total = res.count
          this.resultInfo = res.data
        }
      })
    },
    // 查询最新
    checkNew(row) {
      this.fullscreenLoading = true
      const param = {
        id: row.keyword_id,
        search_engine: this.engine
      }
      keywordApi.updateRank(param).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
          this.getQuery()
        }
        this.fullscreenLoading = false
      })
    },
    changeEngine(val) {
      this.rank = ''
      this.engine = val
      this.getQuery()
    },
    changeRank(val) {
      this.rank = val
      this.getQuery()
    },
    rest() {
      this.rank = ''
      this.getQuery()
    },
    // 查询
    search(keywords) {
      this.keywords = keywords
      this.getQuery()
    },
    // 关键词监控
    getQuery() {
      const val = {
        // website_id: this.siteId,
        website_id: 3,
        engine: this.engine,
        rank: this.rank,
        limit: this.queryPage.size,
        page: this.queryPage.currentPage,
        keyword: this.keywords
      }
      keywordApi.keywordQuery(val).then(res => {
        if (res.code == 0) {
          this.queryData = res.data.count
          this.resultData = res.data.pageData.data
        }
      })
    },
    // 下载关键词模板
    getDownload() {
      keywordApi.keywordDownload().then(res => {
        if (res.code == 0) {
          this.downurl = res.data
        }
      })
    },
    // 上传切换
    handleChangePic(file, fileList) {
      if (fileList.length > 1) {
        fileList.splice(0, 1)
      }
    },
    beforeAvatarUpload(file) { },

    handleAvatarSuccess(res, file) {
      if (res.code == 0) {
        this.$message.success(res.msg)
        this.getList()
      }

      // const isxls = file.type ===
    },
    // 查看
    check(row) {
      // 模拟随机数
      this.keywordsData = row
      // for (var i = 0; i < 7; i++) {
      //   const a = parseInt(Math.random() * (300 + 1), 10)
      //   this.keywordsData.push(a)
      // }
      this.dialogShow2 = true
    },
    // 切换tab
    handleClick(val) {
      this.activeName = val.name
      if (val.name == '1') {
        this.getList()
      } else {
        this.getQuery()
      }
    },
    // 全选
    handleSelectionChange(val) { },
    // 批量删除
    Batchdelete() { },
    // handlechange() {},
    // 获取站点列表
    getWebsiteList() {
      websiteApi.websiteList().then(res => {
        this.options = res.data

        // this.siteId = res.data[0].id
        // this.getList()
      })
    },
    // 新增
    goAdd() {
      // this.$router.push({ name: 'addKeyWords' })
      this.addForm = {
        id: '',
        name: '',
        url: '',
        status: 1,
        position: '',
        website_id: this.$store.getters.siteId
      }

      this.dialogShow = true
    },
    // 编辑
    goedit(row) {
      // this.$router.push({ name: 'addKeyWords', siteId: this.siteId, id: row.id })
      // this.addForm2.website_id = this.siteId
      // this.addForm2.keyword_id = this.keywordIds
      // this.$set(this.addForm2, 'keyword_id', this.keywordIds)

      this.addForm = {
        id: row.id,
        name: row.name,
        status: row.status,
        position: row.position,
        website_id: row.website_id,
        url: row.url
      }
      this.dialogShow = true
    },
    submitEdit() {
      this.$refs.addForm2.validate(valid => {
        if (valid) {
          keywordApi.keywordUpdate({ ...this.addForm2 }).then(res => {
            if (res.code == 0) {
              this.$message.success(res.msg)
              this.dialogShow2 = false
              this.getList()
            }
          })
        }
      })
    },
    submit() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          if (!this.addForm.id) {
            keywordApi.keywordSave({ ...this.addForm }).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.dialogShow = false
                this.getList()
              }
            })
          } else {
            keywordApi.keywordUpdate({ ...this.addForm }).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.dialogShow = false
                this.getList()
              }
            })
          }
        } else {
          this.$message.error(this.$t('请填写必要信息'))
        }
      })
    },

    // 删除
    del(row) {
      const arr = []
      const val = {
        keyword_id: [],
        website_id: row.website_id
      }
      val.keyword_id.push(row.id)
      this.$confirm(this.$t('删除该关键词'), this.$t('提示'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      })
        .then(() => {
          keywordApi.keywordDelete(val).then(res => {
            if (res.code == 0) {
              this.$message.success(res.msg)
              this.getList()
            }
          })
        })
        .catch(() => { })
    },

    // 列表
    getList() {
      this.val.page = this.page.currentPage
      this.val.limit = this.page.size
      this.val.website_id = this.siteId
      // this.val.website_id = 3

      keywordApi.keywordList(this.val).then(res => {
        this.keywordData = res.data
        this.page.total = res.count
        // this.keywordIds = []
        // res.data.forEach(el => {
        //   this.keywordIds.push(el.keyword_id)
        // })

        // this.page.total = res.count
      })
    },
    // 分页规格改变
    handleSizeChange(val) {
      this.page.size = val
      this.page.currentPage = 1
      this.getList()
    },
    // 分页点击
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.getList()
    },
    // 分页规格改变
    handleSizeChange1(val) {
      this.detailPage.size = val
      this.detailPage.currentPage = 1
      this.getDetail()
    },
    // 分页点击
    handleCurrentChange1(val) {
      this.detailPage.currentPage = val
      this.getDetail()
    },
    // 分页规格改变
    handleSizeChange2(val) {
      this.queryPage.size = val
      this.queryPage.currentPage = 1
      this.getQuery()
    },
    // 分页点击
    handleCurrentChange2(val) {
      this.queryPage.currentPage = val
      this.getQuery()
    }
  }
}
</script>
<style lang="scss">
#order {
  .el-tabs--card .el-tabs__content {
    padding: 24px 20px;
  }

  .searchBtn {
    margin-bottom: 24px;

    .el-radio-group {
      .el-radio-button {
        margin-right: 13px;
      }

      .el-radio-button__orig-radio:checked+.el-radio-button__inner {
        background-color: #fff7f0;
        border: none;
        color: var(--huocms-com-color-primary);
      }

      .el-radio-button__inner {
        border-radius: 34px;
        border: none;
        font-size: 14px;
        padding: 0;
        width: 96px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        box-shadow: none;
        font-weight: bold;
        background-color: #f7f8fa;
      }

      .el-radio-button--medium .el-radio-button__inner {
        width: 96px;
        height: 34px;
        line-height: 34px;
      }
    }
  }

  .topbar {
    .el-radio-button__inner {
      border-radius: 0;
      border: none;
      border-left: solid 1px #e5e6eb;
      box-shadow: none;
    }

    .el-radio-button__orig-radio:checked+.el-radio-button__inner {
      color: var(--huocms-com-color-primary);
      background-color: transparent;
      border-color: #e5e6eb;
    }

    .el-radio-button:first-child .el-radio-button__inner {
      border-left: none;
    }

    .el-radio-button--small .el-radio-button__inner {
      padding: 0 20px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      line-height: 22px;
    }
  }

  .keyword {
    .el-select {
      width: 100%;
    }
  }

  .addForm .el-form-item {
    width: 100%;
  }

  .addForm .el-form-item__content {
    width: calc(100% - 80px);
  }
}
</style>
<style scoped lang="scss">
.tab-card {
  .el-upload-list {
    display: inline-block;
    vertical-align: top;
    margin-top: -5px;
  }
}

.el-tab-pane {
  padding-bottom: 20px;
}

.card-box {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .card-item {
    width: calc(25% - 12px);
    border-radius: 6px;
    background-color: #fff7f0;
    padding: 16px;
    box-sizing: border-box;

    .desc {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;

      .text {
        margin-bottom: 14px;
      }

      h6 {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: var(--color-subtitle);
        line-height: 22px;
        margin-bottom: 6px;
      }

      h4 {
        font-size: 24px;
        font-family: SFProText-Medium, SFProText;
        font-weight: 500;
        color: #252526;
        line-height: 32px;
      }

      .icon {
        width: 40px;
        height: 40px;
        background-color: rgba(255, 125, 0, 0.15);
        font-size: 24px;
        border-radius: 50%;
        text-align: center;
        line-height: 40px;
        color: var(--huocms-com-color-primary);
      }
    }

    p {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: var(--color-secondary);
      line-height: 22px;
    }
  }
}

.topbar {
  padding: 33px 0;
  height: 60px;
  display: flex;
  justify-content: space-between;
  color: #333;
  font-size: 15px;

  .bar-left {
    .btn {
      display: inline-block;
      width: 80px;
      height: 30px;
      line-height: 30px;
      border-radius: 30px;
      text-align: center;
      margin-right: 13px;
      font-size: 14px;
      cursor: pointer;
      border: solid 1px #dcdfe6;
      color: #555;
    }

    .btn.restBtn {
      border: none;
      background-color: #fc561c;
      color: #fff;
    }
  }

  .bar-right {
    .el-input {
      width: 280px;

      .el-input__inner {
        border-radius: 60px;
      }
    }
  }
}

.avatar-uploader {
  display: inline-block;
  margin-left: 15px;
}

.el-table {
  margin-bottom: 20px;
}

.note {
  font-size: 14px;

  p {
    line-height: 50px;
    border-bottom: solid 1px #eee;
    text-indent: 1.3em;
  }

  ul {
    margin: 20px 0 20px;
    padding-left: 35px;

    li {
      line-height: 30px;
      color: #666;
    }
  }
}

.content {
  margin-top: 12px;
}
</style>
